<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
        window.onload = function () {
            /*
                点击按钮后，修改box1的大小
            */
            //获取box1
            var box1 = document.getElementById("box1");
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function () {
                //修改Box1的宽度
                /*
                    通过js修改样式
                        语法：元素.style.样式名=样式值

                    css的样式名中含有-，
                    这种名称在js中是不合法的比如 background-color
                    需要将这种样式名修改为驼峰名法，
                    去掉-，将-后的字母大写

                    我们通过style设置的样式都是内联样式，
                        内联样式有较高的优先级，所以通过js修改的样式往往会立即显示

                       如果在样式中邪了 ！important,此时是最高优先级 js也不能覆盖
                    
                */
                /*
                    通过style属性   设置和读取的都是内联样式
                    无法读取样式表中的样式
                */
                box1.style.width = "300px";
                box1.style.height = "300px";
                box1.style.backgroundColor = "skyblue";

                /*
                    获取元素的当前显示的样式
                    语法：元素.currentStyle.样式名
                */
                //    alert(box1.currentStyle.width);ie支持
                /*
                    其他浏览器中可以使用
                    getComputedStyle()方法来获取元素当前的样式
                    这个方法是window的方法，可以直接使用
                    
                    需要两个参数
                        第一个：要获取样式的元素
                        第二个：可以传递一个伪元素  一搬传null
                    
                    该方法会返回一个对象，对象中封装了当前元素对应的样式
                        可以通过对象.样式名来读取样式
                        如果获取的样式没有设置，则会获取到真实的值，而不是默认的值
                        比如：没有设置width,它不会获取到auto,而是一个长度
                    不支持ie8及其以下的

                    通过 getComputedStyle()和currentStyle读取到的样式都是只读的，不能修改
                        如果要修改只能通过 style 属性
                */
                // var obj = getComputedStyle(box1, null);
                // alert(obj.width);
                //正常浏览器
                // alert(getComputedStyle(box1, null).width);
                //ie8
                // alert(box1.currentStyle.width);
                // alert(getStyle(box1,width));
                var w=getStyle(box1,"width");
                alert(w);
            };

        };



        /*
            定义一个函数，用来获取指定元素的当前样式
            参数：
                obj 获取样式的元素
                name 要获取的样式名
        */
        function getStyle(obj, name) {
            // if (window.getComputedStyle)//属性 返回 ture false 
            //  {
            //     //正常浏览器
            //     return getComputedStyle(obj, null)[name];
            // }
            // else {
            //     //ie8
            //     return obj.currentStyle[name];
            // }
            if (obj.currentStyle)//属性 返回 ture false 
             {
                return obj.currentStyle[name];
            }
            else {
                return getComputedStyle(obj, null)[name];
            }
        }
    </script>
</head>
<br>
<button id="btn1">点我一下</button>
<br></br>
<div id="box1"></div>
</body>

</html>